<template>
  <!-- 下拉刷新的容器组件 -->
  <view class="refresh-container-bg">
    <image src="https://img95.699pic.com/photo/50211/0187.jpg_wh300.jpg" mode="scaleToFill" />
    <view class="hint">{{ refreshText }}</view>
  </view>
  <view>
    <scroll-view
      class="scroll-view"
      :scroll-top="scrollTop"
      @scrolltolower="scrollToLower"
      @scroll="scroll"
      @refresherrefresh="refresh"
      :scroll-with-animation="scrollWithAnimation"
      :enable-back-to-top="enableBackToTop"
      :refresher-enabled="true"
      :refresher-threshold="refresherThreshold"
      refresher-default-style="none"
    >
      <!-- 加载更多的容器组件 -->
      <slot></slot>
    </scroll-view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
// 设置竖向滚动条位置
const scrollTop = ref(0)
//iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向
const enableBackToTop = ref(true)
// 设置自定义下拉刷新默认样式，支持设置 black，white，none，none 表示不使用默认样式
// const refresherDefaultStyle = ref('none')
// 在设置滚动条位置时使用动画过渡
const scrollWithAnimation = ref(true)
// 设置自定义下拉刷新阈值
const refresherThreshold = ref(45)
const isRefreshing = ref(false)
const refreshText = ref('下拉可以刷新')
const isLoadingMore = ref(false)
const loadingMoreText = ref('')

//滚动到底部/右边，会触发 scrolltolower 事件
const scrollToLower = () => {
  if (!isLoadingMore.value) {
    isLoadingMore.value = true
    loadingMoreText.value = '加载中...'
    setTimeout(() => {
      isLoadingMore.value = false
      loadingMoreText.value = '上拉加载更多'
    }, 2000)
  }
}
// v滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}
const scroll = (e) => {
  // 滚动时记录滚动位置
  scrollTop.value = e.detail.scrollTop
}
//自定义下拉刷新被触发
const refresh = () => {
  isRefreshing.value = true
  refreshText.value = '正在刷新'

  setTimeout(() => {
    refreshText.value = '刷新完成'
    isRefreshing.value = false
  }, 2000)
}
</script>
<style>
.refresh-container-bg {
  height: 100px;
  width: 100%;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0;
}
.hint {
  font-size: 32rpx;
  color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
.scroll-view {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
</style>
